<template>
    <div class="home-box container index">
      <van-tabs>
        <!-- 频道组件 -->
         <van-tab
         v-for="channel in channelList"
         :title="channel.name"
         :key="channel.id">
           <!-- 文章列表组件 -->
           <article-list :channel="channel" @showMoreAction="hShowMoreAction"></article-list>
         </van-tab>
      </van-tabs>
      <!-- 更多操作 -->
      <van-popup v-model="showMoreAction" round :style="{ width: '80%' }">
        <more-action></more-action>
      </van-popup>
    </div>
</template>
<script>
import { getChannel } from '@/api/channel.js'
// 文章列表组件
import ArticleList from '@/views/home/articleList.vue'
import MoreAction from '@/views/home/moreAction.vue'
export default {
  name: 'home-page',
  data () {
    return {
      channelList: null, // 频道列表
      showMoreAction: false // 弹层显示控制
    }
  },
  components: {
    ArticleList,
    MoreAction
  },
  created () {
    this.getChannel()
  },
  methods: {
    // 获取频道数据
    async getChannel () {
      try {
        const resChannel = await getChannel()
        this.channelList = resChannel.data.data.channels
      } catch (e) {
        console.log(e.message)
      }
    },
    // 弹层显示和隐藏
    hShowMoreAction () {
      this.showMoreAction = true
    }
  }
}
</script>
